<template>
  <div>
    <div ref="chartContainer" :style="{ height: containerHeight }"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, watch } from 'vue';


const props = defineProps({
  option: {
    type: Object,
  },
  height: {
    type: String,
    default: '400px', // 设置默认值为'600px'
  },
})

let myChart = ref(null)
const containerHeight = props.height

watch(props.option, () => {
  generate()
})

const chartContainer = ref(null);

onMounted(() => {
  // 初始化 ECharts 实例
  myChart.value = echarts.init(chartContainer.value);
  generate()
});

const generate = () => {
  // ECharts 配置项
  const options = props.option;

  // 渲染图表
  myChart.value.setOption(options);
}

</script>

<style scoped>

</style>